<template>
  <div class="lottery-item-wrap">
    <div class="lottery-item">
      <div class="lotto-info">
        <div class="lotto-infor">
          <div class="lotto-issue">
            <div class="lotto-type">
              <div class="lotto-name">{{ info.lotteryName }}</div>
              <span>{{ info.issueFullNo }}期</span>
            </div>
            <div class="lotto-date">
              <span>{{ info.issueDay }}</span
              ><span class="has-v-line">{{ info.issueWeek }}</span
              ><span class="small-arrow-icon"></span>
            </div>
          </div>
          <div class="lotto-number">
            <div class="lotto-ball">
              <template v-if="info.resultArea1">
                <span
                  class="ball-em font-num"
                  v-for="(ball, index) in info.resultArea1.split(',')"
                  :key="index"
                >
                  {{ ball }}
                </span>
              </template>
              <template v-if="info.resultArea2">
                <span
                  class="ball-em font-num ball-blue"
                  v-for="(ball, index) in info.resultArea2.split(',')"
                  :key="index"
                  >{{ ball }}</span
                >
              </template>
            </div>
          </div>
        </div>
        <div class="kaijiang-view-cols">
          <div
            class="kaijiang-view-item"
            v-for="(action, index) in info.actionList"
            :key="index"
          >
            {{ action.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DuoduocaiH5LotteryItem',
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    list() {
      return this.info.list;
    },
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.lottery-item-wrap {
  padding: 12px;
  .lottery-item {
    padding: 14px 0 4px;
    background: #fff;
    margin-bottom: 12px;
    border-radius: 8px;
    .lotto-info {
      position: relative;
      .lotto-infor {
        padding: 0 12px;
        .lotto-issue {
          display: flex;
          align-items: center;
          padding: 0 0 8px;
          color: #999;
          font-size: 11px;
          .lotto-type {
            display: flex;
            align-items: center;
            color: #000;
            font-size: 12px;
            padding-right: 7px;
            .lotto-name {
              font-size: 15px;
              font-weight: 600;
              padding-right: 6px;
            }
          }
          .lotto-date {
            position: relative;
            padding-left: 7px;
            display: flex;
            align-items: center;
            color: #999;
            font-size: 12px;
            &::before {
              position: absolute;
              left: 0;
              top: -30%;
              width: 1px;
              height: 14px;
              content: "";
              margin-top: 7px;
              background: #d8d8d8;
              transform: scaleX(0.5);
            }
            .has-v-line {
              position: relative;
              padding-left: 6px;
              margin-left: 6px;
            }
          }
        }
        .lotto-number {
          position: relative;
          padding-bottom: 12px;
          .lotto-ball {
            position: relative;
            width: 94%;
            font-size: 0;
            text-align: left;
            .ball-em {
              width: 32px;
              height: 32px;
              line-height: 32px;
              font-size: 18px;
              font-weight: 500;
              text-align: center;
              color: #fff;
              vertical-align: top;
              display: inline-block;
              border-radius: 50%;
              background-color: #f84848;
              margin: 4px 6px 0 0;
            }
            .ball-em.ball-blue {
              background-color: #5187ff;
            }
          }
          .lotto-ball-3d {
            position: relative;
            width: 100%;
            font-size: 0;
            display: flex;
            flex-flow: row nowrap;
            .lotto-ball-3d .ball-em {
              width: 32px;
              height: 32px;
              line-height: 32px;
              font-size: 15px;
              text-align: center;
              color: #fff;
              vertical-align: top;
              display: inline-block;
              border-radius: 50%;
              background-color: #f84848;
              margin: 4px 6px 0 0;
            }
          }
        }
      }
      .kaijiang-view-cols {
        display: inline-flex;
        flex-wrap: wrap;
        color: #a63231;
        font-size: 12px;
        font-weight: 500;
        margin: 0 4px;
        padding: 2px 0;
        background-color: #fff3ee;
        border-radius: 4px;
        .kaijiang-view-item {
          position: relative;
          width: 25%;
          min-width: 85px;
          box-sizing: border-box;
          height: 30px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          &::after {
            width: 3px;
            height: 3px;
            color: #e7ae88;
            content: "";
            margin-left: 3px;
            display: inline-block;
            vertical-align: middle;
            border-style: solid;
            background: transparent;
            border-width: 1px 0 0 1px;
            transform: rotate(135deg);
          }
        }
      }
    }
  }
}
</style>
